'use client';
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from '@mui/material';
import { useEffect, useState } from 'react';

type ThisProps = {
  open: boolean;
  title?: string;
  message: string;
  cancelText?: string;
  onClose?: Fn;
  onCancel?: Fn;
  okText?: string;
  onOk?: Fn;
};
const ConfirmPopup = ({
  open,
  title,
  message,
  onClose,
  cancelText,
  onCancel,
  okText,
  onOk,
}: ThisProps) => {
  const [openDialog, setOpenDialog] = useState(open || false);

  const handleClose = () => {
    setOpenDialog(false);
    onClose && onClose();
  };
  const handleCancel = () => {
    onCancel && onCancel();
    handleClose();
  };
  const handleOk = () => {
    onOk && onOk();
    handleClose();
  };
  useEffect(() => {
    setOpenDialog(open);
  }, [open]);

  return (
    <Dialog
      open={openDialog}
      onClose={handleClose}
      aria-labelledby="confirm-dialog-title"
      aria-describedby="confirm-dialog-description"
    >
      <DialogTitle id="confirm-dialog-title" sx={{ color: '#080255' }}>
        {title || 'Confirm '}
      </DialogTitle>
      <DialogContent>
        <DialogContentText
          id="confirm-dialog-description"
          sx={{ color: '#080255' }}
        >
          {message}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleCancel} sx={{ color: '#888888' }}>
          {cancelText || 'Cancel'}
        </Button>
        <Button onClick={handleOk} autoFocus sx={{ color: '#942ffb' }}>
          {okText || 'Confirm'}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmPopup;
